<template>
  <div class="main">
    <div class="outerDiv">
      <!-- <goBack :white="true" aa="./planList" :hasTitle="true" topTitle="选院校"></goBack> -->
      <headerBack>
        <b slot="my-center" style="font-weight:600">选院校</b>
      </headerBack>
      <scroller lock-x>
        <div style="margin-top: 0.8rem;">
          <div class="collegeModel">
            <div class="headerTip">请在以下院校中选择一个目标院校</div>
            <div class="tabList">
              <div :class="['tabItem', choTabItem == 1 ? 'tabActive' : '']" @click="handleChoTab(1)">模拟填报结果中选择</div>
              <div :class="['tabItem', choTabItem == 2 ? 'tabActive' : '']" @click="handleChoTab(2)">自主选择</div>
            </div>
            <div class="mainDiv">
              <div class="searchInput">
                <span></span>
                <input v-on:blur="scrolltotop" type="text" :placeholder="choTabItem == 1 ? '请输入关键词，在您的生涯测评结果中搜索' : '请输入您想搜索的大学名称'" v-model="searchKey" @input="handleSearchKey" />
              </div>
              <div v-if="resultList.length > 0" class="resultList">
                <div v-for="(item, index) of resultList" :key="index" :class="['singleResult', choResultCollege == item ? 'hasChoCollege' : '']" @click="handleChoSearchSingleResult(item)">{{ item.academyName }}</div>
              </div>
              <div v-else class="hasNoData">暂无数据</div>
            </div>
          </div>
          <div style="width: 100%; height: 2rem;"></div>
        </div>  
      </scroller>  
    </div>
  </div>  
</template>

<script>
import ls from "store2";
import { getAcademy, getAcademyName, saveAcademy } from "~/api/colleges";
import headerBack from "~/components/headerBack";
export default {
  components: {
    headerBack
  },
  data() {
    return {
      choTabItem: 1,
      searchKey: '', // 搜索关键词
      resultList: [], // 搜索结果
      choResultCollege: ''
    }
  },
  mounted() {
    this.$visit(this.$route.path)
    this.getUsedRecord()
  },
  methods: {
    scrolltotop(){
      window.scroll(0,0)
    },
    getUsedRecord() {
      this.$loading('open')
      getAcademy ({
        province: ls.get('userArea'),
        userType: ls.get('userType')
      }).then(res => {
        this.resultList = res.data
      }).finally(() => {
        this.$hideLoading()
      })
    },
    handleChoTab(item) {
      this.choTabItem = item
      this.searchKey = ''
      this.resultList = []
      if (this.choTabItem == 1) {
        this.getUsedRecord()
      }
    },
    handleSearchKey() {
      if (this.searchKey !== '') {
        if (this.choTabItem == 1) {
          this.getUsedRecord()
        } else {
          this.$loading('open')
          getAcademyName(this.searchKey).then(res => {
            this.resultList = res.data
          }).finally(() => {
            this.$hideLoading()
          })
        }
      }
    },
    handleChoSearchSingleResult(val) {
      this.choResultCollege = val
      this.$loading('open')
      saveAcademy({
        academyCode: val.academyCode,
        academyName: val.academyName,
        userType: ls.get('userType')
      }).then(res => {
        // this.goto('./planList')
        this.$router.back()
      }).finally(() => {
        this.$hideLoading()
      })
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
  .outerDiv {
    width: 100%;
    height: 100vh;
    background: #F7F7FA;
    position: relative;
    .collegeModel {
      padding: 0.32rem;
      .headerTip {
        color: #222;
        font-size: 0.26rem;
        line-height: 0.44rem;
        font-weight: bold;
        margin-bottom: 0.32rem;
      }
      .tabList {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background: #F0F0F5;
        .tabItem {
          width: 3.42rem;
          height: 0.8rem;
          line-height: 0.8rem;
          text-align: center;
          color: #999;
          font-size: 0.28rem;
        }
        .tabItem.tabActive {
          color: @mainColor;
          font-weight: bold;
          background: url('~/static/sxPlan/select_courses_bg_tab_l.png') no-repeat 100% 100%;
          background-size: 100% 100%;
        }
        .tabItem:last-child.tabActive {
          background: url('~/static/sxPlan/select_courses_bg_tab_r.png') no-repeat 100% 100%;
          background-size: 100% 100%;
        }
      }
      .mainDiv {
        padding: 0.52rem 0.28rem 1.5rem;
        background: #fff;
        border-radius:0 0 0.1rem 0.1rem;
        .searchInput {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 100%;
          height: 0.8rem;
          border-radius: 0.4rem;
          background: #F7F7FA;
          padding: 0.2rem 0.24rem;
          margin-bottom: 0.4rem;
          span {
            display: inline-block;
            width: 0.32rem;
            height: 0.32rem;
            margin-right: 0.24rem;
            background: url('~/static/sprite/other_sprites.png') 0.42rem -0.65rem;
            background-size: 4.68rem 4.08rem;
          }
          input {
            border: none;
            outline: none;
            background: #F7F7FA;
            width: 100%;
            font-size: 0.26rem;
            color: #222;
          }
        }
        .resultList {
          .singleResult {
            width: 100%;
            height: 0.96rem;
            line-height: 0.96rem;
            color: #222;
            font-size: 0.28rem;
            border-bottom: 1px solid #E5E8ED;
          }
          .hasChoCollege {
            color: @mainColor;
          }
        }
        .hasNoData {
          color: #999;
          text-align: center;
        }
      }
    }
  }
</style>
